<template>
	<view class="warp">
		<view class="order">
			<view class="order-code">
				订单号: {{orderDetail.order.code}}
			</view>
			<view class="order-content" v-if="orderDetail.order.soure == 'hire'">
				<view class="product" @click="gohireDetail(orderDetail.hire.id)">
					<view class="product-left">
						<image :src="orderDetail.hire.hire_img[0].url" mode=""></image>
					</view>
					<view class="product-right">
						<view class="right-name">
							{{orderDetail.hire.name}}
						</view>
						<view class="right-peizhi">
							{{orderDetail.hire.gearbox}}/{{orderDetail.hire.fuel}}/{{orderDetail.hire.emission}}/{{orderDetail.hire.seat}}
						</view>
						<view class="right-price">
							￥{{orderDetail.hire.price}}
						</view>
					</view>
				</view>
			</view>
			<view class="order-content" v-if="orderDetail.order.soure == 'product'">
				<view class="product">
					<view class="product-left">
						<image :src="orderDetail.product.pro_img[0].url" mode=""></image>
					</view>
					<view class="product-right">
						<view class="right-name">
							{{orderDetail.product.name}}
						</view>
						<view class="right-peizhi">
							{{orderDetail.product.gearbox}}/{{orderDetail.product.fuel}}/{{orderDetail.product.emission}}/{{orderDetail.product.seat}}
						</view>
						<view class="right-price">
							￥{{orderDetail.product.price}}万
						</view>
					</view>
				</view>
			</view>
			<view class="order-content" v-if="orderDetail.order.soure == 'clear'">
				<view class="product">
					<view class="product-left">
						<image :src="http+orderDetail.wash.squareImage" mode=""></image>
					</view>
					<view class="product-right">
						<view class="right-name">
							{{orderDetail.wash.title}}
						</view>
						<view class="right-price">
							￥{{orderDetail.wash.free}}元
						</view>
					</view>
				</view>
			</view>
			<view class="order-free">
				费用: ￥{{orderDetail.order.amount}}
			</view>
		</view>
		
		<view class="refund">
			<view class="refund-top">
				退款原因:
			</view>
			<view class="refund-content">
				<u-input v-model="value" type="textarea" :border="border" />
			</view>
		</view>
		
		<view class="bottom">
			<u-button type="primary" @click="refund()">申请退款</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: [],
				userInfo: [],
				value: '',
				orderId: 0,
				http: 'https://adjyxw.h1668.com',
			}
		},
		onLoad(options) {
			this.orderId = options.id
			// if(options.data){
			// 	this.orderDetail = JSON.parse(decodeURIComponent(options.data))
			// 	console.log(this.orderDetail)
			// }
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userData')
			this.getOrderDetail()
		},
		methods: {
			refund() {
				if(this.value == ''){
					uni.$u.toast('请填写退款原因')
				}else{
					uni.request({
						url: uni.getStorageSync('URL') + 'home/order/Order/changeRefundStatus',
						method: 'POST',
						data: {
							orderid: this.orderId,
							status: 6,
							reasons: this.value,
							busid: this.userInfo.id
						},
						header: {
							"X-Requested-With": "XMLHttpRequest"
						},
						dataType: 'json',
						success: (res)=> {
							if(res.statusCode === 200){
								setTimeout(() => {
									uni.$u.toast('申请退款成功')
									setTimeout(() => {
										uni.navigateTo({
											url: '/pagesC/order/order?state=7'
										})
									}, 1500)
								}, 0);
							}
						}
					})
				}
			},
			getOrderDetail() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/order/order/orderDetail',
					method: 'POST',
					data: {
						busid: this.userInfo.id,
						orderId: this.orderId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.orderDetail = res.data.data
					}
				})
			},
			gohireDetail(id) {
				uni.navigateTo({
					url: '/pagesC/productHire/productHire?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #e1e1e1;
}
.warp {
	.order {
		margin: 20rpx auto;
		background-color: #ffffff;
		height: 350rpx;
		width: 90%;
		border-radius: 30rpx;
		// border: 1rpx solid;
		.order-code {
			padding: 20rpx;
		}
		.order-top {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
			padding: 15rpx;
		}
		.order-content {
			.product {
				width: 95%;
				background-color: #fff;
				margin: 10rpx auto;
				display: flex;
				border-radius: 20rpx;
				.product-left {
					width: 40%;
					height: 200rpx;
					image{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.product-right {
					width: 60%;
					padding: 15rpx;
					.right-name {
						font-size: 1.2rem;
						color: black;
					}
					.right-peizhi {
						font-size: 0.9rem;
						color: #adadad;
						margin-top: 20rpx;
					}
					.right-price {
						margin-top: 20rpx;
						color: black;
						font-size: 1.05rem;
					}
				}
			}
		}
		.order-free {
			width: 100%;
			font-size: 30rpx;
			text-align: right;
			padding: 10rpx;
			color: crimson;
		}
	}
	.refund{
		margin: 20rpx auto;
		background-color: #ffffff;
		height: 350rpx;
		width: 90%;
		border-radius: 30rpx;
		.refund-top {
			font-size: 35rpx;
			padding: 20rpx;
		}
		.refund-content {
			padding: 20rpx;
		}
	}
	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
}
</style>
